<script setup>
    import { onMounted, getCurrentInstance, reactive, ref, computed } from 'vue';
    import { useRouter } from 'vue-router';
    import StatusBar from '../../components/statusBar.vue';
    import Qrcode from 'qrcode';

    //获取当前vue实例
    const { proxy } = getCurrentInstance();

    const createInfo = reactive({
        companion: [],
        hospitals: [],
        service: {}
    })

    onMounted(async () => {
        const { data } = await proxy.$api.h5Companion()
        Object.assign(createInfo, data.data)
        console.log('createInfo', createInfo);

    })

    const router = useRouter();
    //点击返回
    const goBack = () => {
        router.go(-1);
    }

    //form数据
    const form = reactive({

    })

    //就诊医院
    const showHospital = ref(false)
    const showHospColumns = computed(() => {
        return createInfo.hospitals.map(item => {
            return {
                text: item.name,
                value: item.id
            }
        })
    })

    //选择就诊医院
    const showHospConfirm = (item) => {
        // console.log('item', item);
        form.hospital_id = item.selectedOptions[0].value;
        form.hospital_name = item.selectedOptions[0].text;
        showHospital.value = false
    }

    //选择就诊时间
    const showTime = ref(false)
    const currentDate = ref()
    //最小日期
    const minDate = ref(new Date())
    const showTimeConfirm = (item) => {
        const dateStr = item.selectedValues.join('-');
        currentDate.value = dateStr;
        form.starttime = new Date(dateStr).getTime();
        showTime.value = false
    }

    //选择陪诊师
    const showCompanion = ref(false)
    const showCompanionColumns = computed(() => {
        return createInfo.companion.map(item => {
            return {
                text: item.name,
                value: item.id
            }
        })
    })
    const companionName = ref()
    const showCompanionConfirm = (item) => {
        form.companion_id = item.selectedOptions[0].value
        companionName.value = item.selectedOptions[0].text
        showCompanion.value = false
    }

    //支付二维码
    const showCode = ref(false)
    const codeImg = ref('')
    const closeCode = () => {
        showCode.value = false
        router.push('/order');
    }

    //提交表单
    const submit = async () => {
        const params = [
            'hospital_id',
            'hospital_name',
            'companion_id',
            'receiveAddress',
            'tel',
            'demand',
            'starttime'
        ]
        for (const i of params) {
            if (!form[i]) {
                showNotify({ type: 'warning', message: '请把每一项填写完整' });
                return
            }
        }
        const { data: orderRes } = await proxy.$api.createOrder(form)
        Qrcode.toDataURL(orderRes.data.wx_code).then((url) => {
            showCode.value = true;
            codeImg.value = url;
        })
    }


</script>

<template>
    <div class="container">
        <div class="header">
            <van-icon @click="goBack" name="arrow-left" class="header-left" size="30" />
            填写服务订单
        </div>
        <StatusBar :item="25" />
        <van-cell class="cell">
            <template #title>
                <van-image width="25" height="25" :src="createInfo.service.serviceImg" />
                <span class="server-name">{{ createInfo.service.serviceName }}</span>
            </template>
            <template #default>
                <div class="service-text">服务内容</div>
            </template>
        </van-cell>
        <van-cell-group class="cell">
            <van-cell>
                <template #title>就诊医院</template>
                <template #default>
                    <div @click="showHospital = true" class="service-text">
                        {{ form.hospital_name || '请选择就诊医院' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>

            <van-cell>
                <template #title>就诊时间</template>
                <template #default>
                    <div @click="showTime = true" class="service-text">
                        {{ currentDate || '请选择就诊时间' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>

            <van-cell>
                <template #title>陪诊师</template>
                <template #default>
                    <div @click="showCompanion = true" class="service-text">
                        {{ companionName || '请选择陪诊师' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>

            <van-cell>
                <template #title>接送地址</template>
                <template #default>
                    <van-field class="text" input-align="right" v-model="form.receiveAddress" required
                        placeholder="请填写接送地址" />
                </template>
            </van-cell>

            <van-cell>
                <template #title>联系电话</template>
                <template #default>
                    <van-field class="text" input-align="right" v-model="form.tel" required placeholder="联系电话" />
                </template>
            </van-cell>
        </van-cell-group>

        <van-cell-group title="服务需求" class="cell">
            <van-field v-model="form.demand" rows="5" type="textarea" maxlength="50" placeholder="请简单描述您的需求"
                show-word-limit />
        </van-cell-group>

        <van-button @click="submit" class="submit" type="primary" size="large">提交订单</van-button>

        <!-- 选择就诊医院弹窗 -->
        <van-popup v-model:show="showHospital" position="bottom" :style="{ height: '60%' }">
            <van-picker :columns="showHospColumns" @cancel="showHospital = false" @confirm="showHospConfirm" />
        </van-popup>
        <!-- 选择就诊时间弹窗 -->
        <van-popup v-model:show="showTime" position="bottom" :style="{ height: '60%' }">
            <van-date-picker title="选择日期" :min-date="minDate" @cancel="showHospital = false"
                @confirm="showTimeConfirm" />
        </van-popup>
        <!-- 选择陪诊师弹窗 -->
        <van-popup v-model:show="showCompanion" position="bottom" :style="{ height: '60%' }">
            <van-picker :columns="showCompanionColumns" @cancel="showCompanion = false"
                @confirm="showCompanionConfirm" />
        </van-popup>

        <!-- 支付二维码 -->
        <van-dialog v-model:show="showCode" show-cancel-button>
            <van-icon name="cross" class="close" @click="closeCode" />
            <div>微信支付</div>
            <van-image width="150" height="150" :src="codeImg" />
            <div>请使用微信扫码支付</div>
        </van-dialog>
    </div>

</template>

<style lang="less" scoped>
    .container {
        background-color: #f0f0f0;
        height: 100vh;
    }

    .header {
        padding: 10px 0;
        text-align: center;
        line-height: 30px;
        font-size: 16px;

        .header-left {
            float: left;
        }
    }

    .cell {
        width: 95%;
        margin: 5px auto;
        background-color: #fff;

        ::v-deep(.van-field__control) {
            color: var(--van-cell-calue-color);
        }

        ::v-deep(.van-cell__title) {
            display: flex;
            align-items: center;
        }

        .server-name {
            margin-left: 10px;
        }
    }

    .submit {
        position: absolute;
        bottom: 0;
    }

    ::v-deep(.van-dialog__content) {
        text-align: center;
        padding: 20px;

        .close {
            position: absolute;
            left: 20px;
        }
    }
</style>